<template>
  <div class="modal-overlay" v-if="isVisible" @click.self="close">
    <div class="modal-content" @click.stop :style="{ width: width }">
      <div class="modal-header">
        <span class="douyu">{{ title }}</span>
        <span class="close-button" @click="close"></span>
      </div>
      <div class="modal-body">
        <table class="custom-table">
          <thead>
            <tr>
              <th
                v-for="(header, index) in tableHeaders"
                :key="index"
                :style="{ width: header.width }"
                :align="header.align"
              >
                {{ header.label }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
              <td
                v-for="(cell, cellIndex) in row"
                :style="{
                  textAlign: tableHeaders[cellIndex]?.align,
                  width: tableHeaders[cellIndex]?.width,
                }"
                :key="cellIndex"
              >
                {{ cell }}
              </td>
            </tr>
          </tbody>
        </table>
        <Pagination
          :currentPage="currentPage"
          :totalPages="totalPages"
          :total="20"
          @update:currentPage="setPage"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="Layer">
import { ref, computed } from "vue";
import Pagination from "./pagination.vue";
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  isVisible: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: "80%",
  },
});

const tableHeaders = [
  {
    label: "序号",
    prop: "index",
    width: "60px",
    align: "center",
  },
  {
    label: "法院名称",
    prop: "courtName",
    width: "120px",
    align: "center",
  },
  {
    label: "案号",
    prop: "caseNumber",
    width: "120px",
    align: "center",
  },
  {
    label: "案件名称",
    prop: "caseName",
    width: "120px",
    align: "left",
  },
  {
    label: "案由",
    prop: "caseReason",
    width: "120px",
    align: "left",
  },
  {
    label: "收案时间",
    prop: "receiptTime",
    width: "120px",
    align: "center",
  },
  {
    label: "审判程序",
    prop: "judicialProcedure",
    width: "60px",
    align: "center",
  },
  {
    label: "案件状态",
    prop: "caseStatus",
    width: "60px",
    align: "center",
  },
  {
    label: "备注",
    prop: "remark",
    width: "60px",
    align: "center",
  },
];
const tableData = [
  [
    1,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    2,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    3,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    4,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    5,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    6,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    7,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    8,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    9,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
  [
    10,
    "南京市中级人民法院",
    "2022-0001",
    "张三与李四离婚纠纷",
    "离婚纠纷",
    "2022-01-01",
    "一审",
    "审理中",
    "无",
  ],
];

// 分页相关
const currentPage = ref(1); // 当前页
const pageSize = 5; // 每页显示多少条数据
const totalPages = computed(() => Math.ceil(tableData.length / pageSize)); // 总页数

// 当前页的数据
const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return tableData.slice(start, end);
});

const setPage = (newPage) => {
  currentPage.value = newPage;
};

const emit = defineEmits(["update:isVisible"]);

const close = () => {
  emit("update:isVisible", false);
};
</script>

<style scoped lang="scss">
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* Ensures the modal is above other content */
}

.modal-content {
  border: 1px solid #159AFF;
  padding: 0 24px;
  background-color: #042c4e;
  box-shadow: 0 4px 20px rgba(33, 169, 214, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  .douyu {
    margin-top: 4px;
  }

  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(50% - 10px);
    width: 6px;
    height: 20px;
    background: #159aff;
  }
}

.close-button {
  background: url("../assets/image/judge/close.png") no-repeat center center;
  background-size: cover;
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
}

.modal-body {
  padding: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.custom-table thead {
  height: 40px;
  background: #175c98;
  border-bottom: #0a61aa solid 1px;

  th {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 500;
    color: #fff;
    line-height: 36px;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.custom-table tbody {
  tr {
    height: 40px;

    td {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      line-height: 36px;
      white-space: nowrap;
      /* 防止文本换行 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  tr:nth-child(even) {
    background: #0d508b;
  }

  tr:nth-child(odd) {
    background: #0a487e;
  }
}
</style>
